<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>新建家庭保障规划</title>
    <link rel="stylesheet" href="./libs/main.css">
    <link rel="stylesheet" href="./build/css/newReport.css">
    <script src="./libs/jquery/jquery-1.8.3.min.js"></script>
    <script src="./libs/vue/vuedev.js"></script>
</head>
<body>
     <div class="wrap">

            <!--loading-->
            <div id="loading"  v-if="loading">
                <div class="load-spinner">
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
            </div>


        <div class="page-wrapper">
         <div class="progress-bar">
             <div   class="progress-line" :class="'progress-line-'+progress">
                 <div class="progress-position">{{progress}}/5</div>
             </div>
         </div>

         <div class="main-containner">
             <div class="page page1"  :class="{moveLeft:progress > 1,moveRight:progress < 1}">
                <div class="headline">
                    请输入您的基本信息，便于为您定制保障规划
                </div>
                <div class="inner-containner">
                    <div class="input-wrap">
                        <div>称呼</div>
                        <input type="text"  v-model="form.name"  placeholder="请输入称呼" >
                    </div>
                    <div class="input-wrap">
                        <div>性别</div>
                        <div>
                            <div class="radio-wrap">
                                <div  @click="switchfunc('sex',1)" :class="form.sex==1?'active':''">先生</div>
                                <div  @click="switchfunc('sex',0)" :class="form.sex==0?'active':''">女士</div>
                            </div>
                        </div>      
                    </div>
                    <div class="input-wrap">
                        <div>年龄</div>
                        <input type="number"  v-model="form.age"   placeholder="请输入年龄" >
                        <div>岁</div>
                    </div>
                    <div class="input-wrap">
                        <div>家庭成员</div>
                        <div class="checkbox-wrap">
                            <input type="checkbox" id="spouse" @click="checkbox('spouse')"  v-model="form.spouse"  :checked="form.spouse" name="spouse">
                            <label for="spouse"> 配偶</label>
                            <input type="checkbox" id="children" @click="checkbox('children')"  v-model="form.children"   :checked="form.children"   name="children">
                            <label for="children"> 子女</label>
                        </div>
                    </div>
                </div>
            </div>
             <div class="page page2"  :class="{moveLeft:progress > 2,moveRight:progress < 2}">
                <div class="headline">
                    家庭结构不一样，保障规划不一样。准确的家庭情况
                    信息，让您的保障规划更全面。                    
                </div>
                <div class="inner-containner">
                    <div   v-if="form.spouse"  class="input-wrap">
                        <div>配偶年龄</div>
                        <input type="number"  v-model="form.spouseAge"    placeholder="请输入年龄" >
                        <div>岁</div>
                    </div>
                    <div  v-if="form.children"  class="input-wrap">
                        <div>已育子女</div>
                         <div>
                             <div class="add-reduce-wrap">
                                 <div @click='addChild'>+</div>
                                 <div>{{childNumber}}</div>
                                 <div @click='reduceChild'>-</div>
                             </div>
                         </div>
                    </div>
                    <div  v-if="form.children"  class="input-wrap"   v-for="(item,index) in form.childrenList" :key="index" >
                        <div>子女{{index+1}}年龄</div>
                        <input type="number" v-model="item.age"  placeholder="请输入年龄" >
                        <div>岁</div>
                    </div>
                </div>
            </div>
             <div class="page page3"  :class="{moveLeft:progress > 3,moveRight:progress < 3}">
                <div class="headline">       
                    输入您的家庭收支概况，测算所需保险保额，为您提
                    供合适的保险规划建议                      
                </div>
                <div  class="slide-wrap">
                    <div>您本人的收支概况</div>
                    <div></div>
                </div>
                <div class="inner-containner">
                    <div class="input-wrap">
                        <div>您的年收入</div>
                        <input type="number"    v-model="form.yearIncome"   >
                        <div>万元</div>
                    </div>
                    <div class="input-wrap">
                        <div>您的收入中用于个人花销的占比有</div>
                        <input type="number"   v-model="form.yearExpendRatio"   style="width:25px;"   >
                        <div>%</div>
                    </div>
                    <div class="input-wrap">
                        <div>您的计划退休年龄</div>
                        <input type="number"  v-model="form.planRetireAge"   style="width:50px;"  >
                        <div>岁</div>
                    </div>
                </div>
                <div  v-if="form.spouse==1">
                    <div  class="slide-wrap">
                        <div>您配偶的收支概况</div>
                        <div></div>
                    </div>
                    <div class="inner-containner">
                        <div class="input-wrap">
                            <div>您的年收入</div>
                            <input type="number"    v-model="form.spouseYearIncome"   >
                            <div>万元</div>
                        </div>
                        <div class="input-wrap">
                            <div>您的收入中用于个人花销的占比有</div>
                            <input type="number"   v-model="form.spouseExpendRatio"    style="width:25px;"   >
                            <div>%</div>
                        </div>
                        <div class="input-wrap">
                            <div>您的计划退休年龄</div>
                            <input type="number"   v-model="form.spouseRetireAge"   style="width:50px;"  >
                            <div>岁</div>
                        </div>
                    </div>                    
                </div>
            </div>
             <div class="page page4"  :class="{moveLeft:progress > 4,moveRight:progress < 4}">
                <div class="headline">              
                    最后，请输入您的家庭保障期望，让我们为您提供更
                    合适的规划建议。                                        
                </div>
                <div class="inner-containner">
                    <div class="for-to-year"> <span>1. 在家庭成员遭受意外伤害时，如果把保额赔付看做个人收入的替代，你希望这个收入保障至 </span><input type="text" v-model="form.safeguardAge"><span> 岁。</span></div>
                    <div>
                        <div class="select-title">2. 如果有家庭成员发生重大疾病，在治疗时，您希望给到哪种品质的医疗照护？</div>
                        <div class="select-main">
                            <div class="select-item"  @click="level(1)"  :class="form.anticipantMedicalType==1?'active':''">一般水平</div>
                            <div class="select-item"  @click="level(2)"  :class="form.anticipantMedicalType==2?'active':''">优越水平</div>
                            <div class="select-item"  @click="level(3)" :class="form.anticipantMedicalType==3?'active':''">尊贵水平</div>
                        </div>
                    </div>
                </div>
            </div>
             <div class="page page5"  :class="{moveLeft:progress > 5,moveRight:progress < 5}">
                <div class="headline">              
                    基于您的家庭成员已有保险保障，为您提供更完善的
                    家庭保障规划方案。                                                            
                </div>
                <div  class="slide-wrap">
                    <div>您本人已有保险保障</div>
                    <div></div>
                </div>
                <div class="inner-containner">
                    <div class="input-wrap">
                        <div>社会医疗保险</div>
                        <div>
                            <div class="radio-wrap">
                                <div  @click="switchfunc('socialMedicalInsurance',1)"  :class="form.socialMedicalInsurance==1?'active':''">有</div>
                                <div  @click="switchfunc('socialMedicalInsurance',0)" :class="form.socialMedicalInsurance==0?'active':''">无</div>
                            </div>
                        </div>      
                    </div>
                    <div class="input-wrap">
                        <div>人寿保险保额</div>
                        <input type="number"  v-model="form.lifeInsurance" >
                        <div>万元</div>
                    </div>
                    <div class="input-wrap">
                        <div>意外保险保额</div>
                        <input type="number"  v-model="form.accidentInsurance"  >
                        <div>万元</div>
                    </div>
                    <div class="input-wrap">
                        <div>重疾保险保额</div>
                        <input type="number"  v-model="form.seriousIllnessInsurance"  >
                        <div>万元</div>
                    </div>
                    <div class="input-wrap">
                        <div>医疗保险保额</div>
                        <input type="number"  v-model="form.medicalInsurance"  >
                        <div>万元</div>
                    </div>
                </div>
                <div v-if="form.spouse">
                    <div  class="slide-wrap">
                        <div>您配偶已有保险保障</div>
                        <div></div>
                    </div>
                    <div class="inner-containner">
                        <div class="input-wrap">
                            <div>社会医疗保险</div>
                            <div>
                                <div class="radio-wrap">
                                    <div  @click="switchfunc('spouseSocialMedicalInsurance',1)" :class="form.spouseSocialMedicalInsurance==1?'active':''">有</div>
                                    <div  @click="switchfunc('spouseSocialMedicalInsurance',0)" :class="form.spouseSocialMedicalInsurance==0?'active':''">无</div>
                                </div>
                            </div>      
                        </div>
                        <div class="input-wrap">
                            <div>人寿保险保额</div>
                            <input type="number"  v-model="form.spouseLifeInsurance"  >
                            <div>万元</div>
                        </div>
                        <div class="input-wrap">
                            <div>意外保险保额</div>
                            <input type="number"   v-model="form.spouseAccidentInsurance" >
                            <div>万元</div>
                        </div>
                        <div class="input-wrap">
                            <div>重疾保险保额</div>
                            <input type="number"    v-model="form.spouseSeriousIllnessInsurance" >
                            <div>万元</div>
                        </div>
                        <div class="input-wrap">
                            <div>医疗保险保额</div>
                            <input type="number"  v-model="form.spouseMedicalInsurance"  >
                            <div>万元</div>
                        </div>
                    </div>                    
                </div>
                <div v-if="form.childrenList.length>0"  v-for="(item,index) in form.childrenList" :key="index">
                    <div  class="slide-wrap">
                        <div>您子女{{index+1}}已有保险保障</div>
                        <div></div>
                    </div>
                    <div class="inner-containner">
                        <div class="input-wrap">
                            <div>社会医疗保险</div>
                            <div>
                                <div class="radio-wrap">
                                    <div  @click="switchfunc('childrenList',1,index)"   :class="item.socialMedicalInsurance==1?'active':''">有</div>
                                    <div  @click="switchfunc('childrenList',0,index)"  :class="item.socialMedicalInsurance==0?'active':''">无</div>
                                </div>
                            </div>      
                        </div>
                        <div class="input-wrap">
                            <div>人寿保险保额</div>
                            <input type="number"  v-model="item.lifeInsurance">
                            <div>万元</div>
                        </div>
                        <div class="input-wrap">
                            <div>意外保险保额</div>
                            <input type="number"  v-model="item.accidentInsurance">
                            <div>万元</div>
                        </div>
                        <div class="input-wrap">
                            <div>重疾保险保额</div>
                            <input type="number"  v-model="item.seriousIllnessInsurance">
                            <div>万元</div>
                        </div>
                        <div class="input-wrap">
                            <div>医疗保险保额</div>
                            <input type="number"  v-model="item.medicalInsurance"  >
                            <div>万元</div>
                        </div>
                    </div>                        
                </div>
            </div>
         </div>

         <div class="footer-containner">
             <div class="control-box  start"  v-if="progress==1">
                <div class="start-btn"  @click="nextItem">
                        下一步
                </div>
             </div>
             <div class="control-box has-two"  v-if="progress!=1">
                  <div  @click="preItem">上一步</div>
                  <div  @click="nextItem"   v-if="progress!=5">下一步</div>
                  <div  @click="overInput"   v-if="progress==5">查看保障规划</div>
             </div>
         </div>

        </div>

     </div>
      
     <script src="./build/js/newReport.js"></script>
     <script src="./libs/main.js"></script>
</body>
</html>